<script setup lang="ts">
import { ref, onMounted } from 'vue'
import service from '@/utils/request'
import router from '@/router/index'
import LeoDate from '@/components/LeoDateTime/index.vue'
import type { TabsPaneContext } from 'element-plus'
import { Edit, Picture, Setting, Upload } from '@element-plus/icons-vue'

//组件挂载完毕后，发送请求获取数据
// onMounted(() => {
//   service
//     .post('/user/login', { username: 'admin', password: '111111' })
//     .then((res) => {
//       console.log('登录成功', res)
//       //跳转到主页
//       router.push('/')
//     })
//     .catch((err) => {
//       console.log('登录失败', err)
//     })
// })

const time = ref('2024-05-10 16:10')
const AlertVisible = ref(false)

const changeVisible = () => {
  AlertVisible.value = !AlertVisible.value
}

const activeName = ref('')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  activeName.value = tab.paneName
  console.log(activeName.value)
}
const addDynamicTab = () => {
  editableTabs.value.push({ id: 5, label: '动态Tab', name: 'dynamic' })
}

const editableTabs = ref([
  { id: 1, label: '用户', name: 'first' },
  { id: 2, label: '配置', name: 'second' },
  { id: 3, label: '角色', name: 'third' },
  { id: 4, label: '任务', name: 'fourth' },
])

const handleRemove = () => {
  const index = editableTabs.value.findIndex((item) => item.name === activeName.value)
  if (index !== -1) {
    editableTabs.value.splice(index, 1)
  }
}

const active = ref(1)

const handleBack = () => {
  console.log('返回')
}

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <main>
    <h1>Welcome to EYL!</h1>
    <svg-icon name="flower" color="#ff00ff" :iconStyle="{ width: '100px', height: '100px' }" />
    <div>
      <p>我是应用了scss样式</p>
    </div>
    <leo-date :date-type="5" v-model="time" style="width: 200px" />
  </main>
  <el-button type="primary" @click="changeVisible">Open Alert</el-button>
  <el-alert v-show="AlertVisible" type="success" show-icon effect="light" title="成功提示">
    <template #title>
      <h3>提示</h3>
    </template>
    <template #default>
      <h3>默认内容</h3>
    </template>
  </el-alert>
  <div>
    <el-button type="primary" @click="addDynamicTab">动态添加Tab页</el-button>
  </div>
  <el-tabs
    v-model="activeName"
    @tab-click="handleClick"
    type="border-card"
    tab-position="top"
    class="demo-tabs"
    closable
    @tab-remove="handleRemove"
    :stretch="false"
  >
    <!-- <el-tab-pane label="用户" name="first">
      <template #label>
        <span class=".custom-tabs-label">
          <el-icon><User /></el-icon>
          用户
        </span>
      </template>
    </el-tab-pane>
    <el-tab-pane label="配置" name="second">配置</el-tab-pane>
    <el-tab-pane label="角色" name="third">角色</el-tab-pane>
    <el-tab-pane label="任务" name="fourth">任务</el-tab-pane> -->
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.id"
      :label="item.label"
      :name="item.name"
    ></el-tab-pane>
  </el-tabs>

  <el-steps :active="active" finish-status="success" align-center simple>
    <el-step title="填报" description="填写表单" :icon="Edit"></el-step>
    <el-step title="申请" description="提交申请" :icon="Upload"></el-step>
    <el-step title="审批" description="等待审批" :icon="Picture"></el-step>
  </el-steps>
  <el-button type="primary" @click="active++ > 2 ? (active = 0) : active">下一步</el-button>

  <el-page-header content="页面标题" @back="handleBack"></el-page-header>
  <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
    <el-menu-item index="1">
      <template #title>
        <el-icon><Location /></el-icon>
        <span>首页</span>
      </template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Tools /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item>
          <template #title>
            <el-icon><Document /></el-icon>
            <span>角色管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item>
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>权限管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="3">
      <template #title>
        <el-icon><View /></el-icon>
        <span>关于我们</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped lang="scss">
div {
  p {
    font-size: large;
    color: $color; //使用了scss全局变量
  }
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
